<template>
    <el-container class="app-container">
        <el-header class="app-header">
            <div class="header-content">
                <div class="header-left">
                    <div class="logo">
                        <el-icon class="logo-icon">
                            <Trophy />
                        </el-icon>
                        <h1>比赛报名费用管理系统</h1>
                    </div>
                </div>
                <div class="header-right">
                    <el-dropdown @command="handleCommand" class="user-dropdown">
                        <el-button type="text" class="user-info">
                            <el-avatar :size="36"
                                :src="userStore.user?.avatar"
                                :icon="UserFilled" 
                                class="user-avatar" />
                            <span class="username">{{ userStore.user?.username || '未登录' }}</span>
                            <el-icon class="dropdown-icon">
                                <ArrowDown />
                            </el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu class="user-menu">
                                <el-dropdown-item command="profile">
                                    <el-icon><User /></el-icon>
                                    个人信息
                                </el-dropdown-item>
                                <el-dropdown-item command="settings">
                                    <el-icon><Setting /></el-icon>
                                    系统设置
                                </el-dropdown-item>
                                <el-dropdown-item divided command="logout">
                                    <el-icon><SwitchButton /></el-icon>
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        <el-container class="main-container">
            <el-aside width="280px" class="app-aside">
                <div class="menu-sections">
                    <!-- 核心功能 -->
                    <div class="menu-section">
                        <div class="section-header">
                            <el-icon class="section-icon"><Star /></el-icon>
                            <span>核心功能</span>
                        </div>
                        <el-menu 
                            default-active="1" 
                            class="el-menu-vertical" 
                            @select="handleSelect" 
                            background-color="transparent"
                            text-color="var(--text-secondary)" 
                            active-text-color="var(--primary-color)">
                            <el-menu-item index="1" class="menu-item">
                                <el-icon class="menu-icon">
                                    <DataBoard />
                                </el-icon>
                                <span>仪表板</span>
                                <div class="menu-badge">首页</div>
                            </el-menu-item>
                            <el-menu-item index="2" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Document />
                                </el-icon>
                                <span>报名记录</span>
                                <div class="menu-badge new">新</div>
                            </el-menu-item>
                            <el-menu-item index="3" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Trophy />
                                </el-icon>
                                <span>比赛项目</span>
                            </el-menu-item>
                            <el-menu-item index="4" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Money />
                                </el-icon>
                                <span>费用统计</span>
                            </el-menu-item>
                        </el-menu>
                    </div>

                    <!-- 数据分析 -->
                    <div class="menu-section">
                        <div class="section-header">
                            <el-icon class="section-icon"><DataAnalysis /></el-icon>
                            <span>数据分析</span>
                        </div>
                        <el-menu 
                            class="el-menu-vertical" 
                            @select="handleSelect" 
                            background-color="transparent"
                            text-color="var(--text-secondary)" 
                            active-text-color="var(--primary-color)">
                            <el-menu-item index="5" class="menu-item">
                                <el-icon class="menu-icon">
                                    <DataAnalysis />
                                </el-icon>
                                <span>数据分析</span>
                            </el-menu-item>
                            <el-menu-item index="9" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Files />
                                </el-icon>
                                <span>报告管理</span>
                            </el-menu-item>
                        </el-menu>
                    </div>

                    <!-- 业务流程 -->
                    <div class="menu-section">
                        <div class="section-header">
                            <el-icon class="section-icon"><Document /></el-icon>
                            <span>业务流程</span>
                        </div>
                        <el-menu 
                            class="el-menu-vertical" 
                            @select="handleSelect" 
                            background-color="transparent"
                            text-color="var(--text-secondary)" 
                            active-text-color="var(--primary-color)">
                            <el-menu-item index="13" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Document />
                                </el-icon>
                                <span>报名流程</span>
                            </el-menu-item>
                            <el-menu-item index="14" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Money />
                                </el-icon>
                                <span>在线支付</span>
                            </el-menu-item>
                            <el-menu-item index="6" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Bell />
                                </el-icon>
                                <span>通知公告</span>
                            </el-menu-item>
                        </el-menu>
                    </div>

                    <!-- 系统管理 -->
                    <div class="menu-section">
                        <div class="section-header">
                            <el-icon class="section-icon"><Setting /></el-icon>
                            <span>系统管理</span>
                        </div>
                        <el-menu 
                            class="el-menu-vertical" 
                            @select="handleSelect" 
                            background-color="transparent"
                            text-color="var(--text-secondary)" 
                            active-text-color="var(--primary-color)">
                            <el-menu-item index="10" class="menu-item">
                                <el-icon class="menu-icon">
                                    <UserManagement />
                                </el-icon>
                                <span>用户管理</span>
                            </el-menu-item>
                            <el-menu-item index="11" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Warning />
                                </el-icon>
                                <span>系统日志</span>
                            </el-menu-item>
                            <el-menu-item index="12" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Monitor />
                                </el-icon>
                                <span>系统监控</span>
                            </el-menu-item>
                            <el-menu-item index="7" class="menu-item">
                                <el-icon class="menu-icon">
                                    <Setting />
                                </el-icon>
                                <span>系统设置</span>
                            </el-menu-item>
                        </el-menu>
                    </div>

                    <!-- 个人中心 -->
                    <div class="menu-section">
                        <div class="section-header">
                            <el-icon class="section-icon"><User /></el-icon>
                            <span>个人中心</span>
                        </div>
                        <el-menu 
                            class="el-menu-vertical" 
                            @select="handleSelect" 
                            background-color="transparent"
                            text-color="var(--text-secondary)" 
                            active-text-color="var(--primary-color)">
                            <el-menu-item index="8" class="menu-item">
                                <el-icon class="menu-icon">
                                    <User />
                                </el-icon>
                                <span>个人信息</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                </div>
            </el-aside>
            <el-main class="app-main">
                <div class="main-content">
                    <router-view v-slot="{ Component }">
                        <transition name="fade" mode="out-in">
                            <component :is="Component" />
                        </transition>
                    </router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup>
import { Document, Money, Setting, User, UserFilled, Trophy, ArrowDown, SwitchButton, Bell, DataBoard, DataAnalysis, Files, UserFilled as UserManagement, Monitor, Warning, Star } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessageBox } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

const handleSelect = (key) => {
    console.log('菜单点击:', key) // 添加调试信息
    const routes = {
        '1': '/dashboard',
        '2': '/entries',
        '3': '/competitions',
        '4': '/statistics',
        '5': '/data-analysis',
        '6': '/notifications',
        '7': '/settings',
        '8': '/profile',
        '9': '/reports',
        '10': '/user-management',
        '11': '/system-logs',
        '12': '/system-monitor',
        '13': '/registration-flow',
        '14': '/payment'
    }
    console.log('跳转到:', routes[key]) // 添加调试信息
    router.push(routes[key])
}

const handleCommand = (command) => {
    switch (command) {
        case 'logout':
            ElMessageBox.confirm('确定要退出登录吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                userStore.logout()
                router.push('/login')
            })
            break
        case 'profile':
            router.push('/profile')
            break
        case 'settings':
            router.push('/settings')
            break
    }
}
</script>

<style scoped>
.app-container {
    height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.app-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    padding: 0;
    box-shadow: var(--shadow-lg);
    position: relative;
    z-index: 1000;
    height: 50px !important;
}

.app-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--spacing-lg);
    height: 100%;
    position: relative;
    z-index: 1;
}

.header-left {
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.logo-icon {
    font-size: 1.5rem;
    color: #fbbf24;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.header-content h1 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(45deg, #ffffff, #f1f5f9);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-right {
    display: flex;
    align-items: center;
}

.user-dropdown {
    transition: all 0.3s ease;
}

.user-info {
    display: flex;
    align-items: center;
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.user-info:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.user-avatar {
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.user-info:hover .user-avatar {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

.username {
    margin: 0 var(--spacing-md);
    font-size: 14px;
    font-weight: 500;
}

.dropdown-icon {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.user-info:hover .dropdown-icon {
    transform: rotate(180deg);
}

.user-menu {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: none;
    padding: var(--spacing-sm) 0;
}

.user-menu .el-dropdown-menu__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    transition: all 0.3s ease;
}

.user-menu .el-dropdown-menu__item:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    transform: translateX(4px);
}

.main-container {
    height: calc(100vh - 50px);
}

.app-aside {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: var(--shadow-xl);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    margin: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-sm);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.app-aside::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.02) 0%, rgba(147, 51, 234, 0.02) 100%);
    pointer-events: none;
}

.menu-sections {
    padding: var(--spacing-md);
    height: 100%;
    overflow-y: auto;
    position: relative;
    z-index: 1;
}

.menu-sections::-webkit-scrollbar {
    width: 4px;
}

.menu-sections::-webkit-scrollbar-track {
    background: transparent;
}

.menu-sections::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.menu-sections::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.menu-section {
    margin-bottom: var(--spacing-lg);
}

.menu-section:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
    border-radius: var(--radius-md);
    border-left: 3px solid var(--primary-color);
}

.section-icon {
    font-size: 1rem;
    color: var(--primary-color);
}

.section-header span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.el-menu-vertical {
    border: none;
    background: transparent;
    padding: 0;
}

.menu-item {
    height: 40px;
    line-height: 40px;
    margin: var(--spacing-xs) 0;
    border-radius: var(--radius-md);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-sm);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}

.menu-item:hover::before {
    left: 100%;
}

.menu-item:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light)) !important;
    color: white !important;
    transform: translateX(8px) scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

.menu-item.is-active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
    transform: translateX(8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.4);
}

.menu-item .el-menu-item__content {
    display: flex;
    align-items: center;
    width: 100%;
}

.menu-icon {
    margin-right: var(--spacing-md);
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.menu-item:hover .menu-icon,
.menu-item.is-active .menu-icon {
    transform: scale(1.15) rotate(5deg);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.menu-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    font-weight: 500;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.menu-badge.new {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.app-main {
    background: transparent;
    padding: var(--spacing-md);
    overflow-y: auto;
}

.main-content {
    background: var(--background-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-height: calc(100vh - 100px);
    padding: var(--spacing-lg);
    transition: all 0.3s ease;
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s ease;
}

.fade-enter-from {
    opacity: 0;
    transform: translateY(20px);
}

.fade-leave-to {
    opacity: 0;
    transform: translateY(-20px);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-content {
        padding: 0 var(--spacing-sm);
    }
    
    .header-content h1 {
        font-size: 1rem;
    }
    
    .logo-icon {
        font-size: 1.2rem;
    }
    
    .app-aside {
        width: 200px !important;
        margin: var(--spacing-xs) 0 var(--spacing-xs) var(--spacing-xs);
    }
    
    .app-main {
        padding: var(--spacing-sm);
    }
    
    .main-content {
        padding: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .app-aside {
        width: 180px !important;
    }
    
    .header-content h1 {
        font-size: 1rem;
    }
    
    .username {
        display: none;
    }
}
</style>